<template>
		<div class="card head">
			<div class="headImg">
				<img :src='HeadImg'/>
			</div>
			<div class="headinfo">
					 <span class="title">
						  {{name}}
					 </span>
					 <br>
					 <span>
						 ID:{{ID}}
					 </span><br>
					 <span>
						 状态:
						 <span class="state">
							在线
						 </span>
					 </span>
			</div>
		</div>
</template>

<script lang="ts">
	import {defineComponent,inject,onMounted} from 'vue'
	import {useStore} from 'vuex';
	export default defineComponent({
		setup() {
			
			var loading:any=inject('loading')
			var store=useStore()
			var pageDate=store.getters.getPageData
			var HeadImg=pageDate.HeadImg
			var name=pageDate.name
			var ID=pageDate._id
			onMounted(()=>{
				console.log('我的')
				loading.close()
			})
			return {
				HeadImg,
				name,
				ID,
				loading
			}
		}
	})
</script>
<style>
	.head{
		display: flex;
		flex-direction: row;
	}
	.headImg{
		width:100px;
		height: 100px;
	}
	.headImg img{
		width: 100%;
		height: 100%;
		border-radius: 50%;
		box-shadow: 0 0 5px black;
	}
	.headinfo{
		padding:10px;
	}
	.headinfo .title{
		font-size: 2em;
	}
	.headinfo .state{
		color:#22cf22;
	}
</style>